<template>
	<view>
		<view class="page-head ptb25 plr30 flex-box">
			<input class="flex-1 fs28 col-3" type="text" v-model="course_code" placeholder="输入兑换码" confirm-type="search" @confirm="search" placeholder-style="color:var(--placeholder);" />
			<view class="m-btn1" @click="search">查询</view>
		</view>
		<view class="container">
			<view class="course-list2 plr30">
				<navigator url="#" class="nav-course flex-box ptb30" hover-class="none" v-for="(item,index) in courseLists">
					<!-- <view class="time-long">00:08:00</view> -->
					<image class="img-course mr20" :src="item.course.thumb_image" mode="aspectFill"></image>
					<view class="flex-1">
						<view class="m-ellipsis fs26 col-0 mb10">{{item.course.name}}</view>
						<view class="m-ellipsis fs22 col-6 mb30">{{item.course.description}}</view>
						<view class="flex-box">
							<image class="icon1 mr10" v-if="item.course.type==1" src="/static/icon/icon_tv.png" mode="aspectFit"></image>
							<image class="icon1 mr10" v-if="item.course.type==2" src="/static/icon/icon_video.png" mode="aspectFit"></image>
							<image class="icon1 mr10" v-if="item.course.type==3" src="/static/icon/icon_book.png" mode="aspectFit"></image>
							<view class="flex-1 fs24 col-9">{{item.course.type==3?item.course.total_num:item.course.play_count}}人学习过</view>
							<view class="m-btn1" @click="exchange(index)">立即兑换</view>
						</view>
					</view>
				</navigator>
			</view>
			<!--  -->
			<view class="ptb40 plr30 col-black">
				<view class="fs30 fwb mb30">兑换说明</view>
				<view class="text1 fs28">
					<rich-text :nodes="article.content"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			course_code:'',
			courseLists:[],
			article:{}
		};
	},
	onLoad(){
		this.fetchArticle();
	},
	methods: {
		fetchArticle(){
			this.$core.get({url:'xiluedu.singlepage/article',data:{biaoshi:'exchange'},success:(ret)=>{
			    this.article = ret.data;
			}});
		},
		search(){
			let course_code = this.course_code.trim();
			if(!course_code){
				return false;
			}
			this.$core.get({url:'xiluedu.course/code_course',data:{course_code:course_code},success:(ret)=>{
			    this.courseLists = ret.data;
			}});
		},
		exchange(index){
			let that = this;
			let course_code = this.course_code;
			let courseDetail = this.courseLists[index];
			uni.showModal({
				title: '提示',
				content: '确认兑换？',
				success: function (res) {
					if (res.confirm) {
						that.$core.post({url:'xiluedu.course/exchange_course',data:{course_code:course_code,course_code_id:courseDetail.id},success:(ret)=>{
						    uni.showToast({title: '兑换成功',icon:'none'})
						}});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		},
	}
};
</script>

<style scoped>
.page-head {
	border-bottom: 20rpx solid rgb(248, 248, 248);
	background-color: #fff;
}
.m-btn1 {
	width: 130rpx;
	height: 50rpx;
	background: var(--bg1);
	border-radius: 24rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #ffffff;
	text-align: center;
	line-height: 50rpx;
}
.container {
	padding-top: 120rpx;
}
.course-list2 {
	border-bottom: 20rpx solid rgb(248, 248, 248);
}
.course-list2 .img-course {
	display: block;
	width: 280rpx;
	height: 160rpx;
	border-radius: 10rpx;
}
.course-list2 .nav-course + .nav-course {
	border-top: 1rpx solid var(--border);
}
.text1 {
	line-height: 48rpx;
}
</style>
